<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <!-- load css -->
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/font/iconfont.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/layui/css/layui.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap-table/bootstrap-table.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/table.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/select2/css/select2.css}" media="all"/>

    <style>
        h2{
            margin: 0;
        }
        .blocks{
            display: flex;
            flex-direction: column;
            width: 20rem;
            height: 6rem;
        }
        .blockout{
            display: flex;
            justify-content: space-between;
            margin: 1.5rem 0;
            padding: 0 1rem;
        }
        #auditType{
            display: inline-block;
            min-width: 6rem;
            height: 3rem;
            background-color: #409EFF;
            border-radius: 4px;
            color: white;
            text-align: center;
            line-height: 3rem;
        }
        input[type="text"]:disabled{
            background-color: #EEF1F6;
        }
        input[type="text"],select{
            height: 3rem;
        }
        /*#suppplierDetail{*/
            /*display: none;*/
        /*}*/
        #tableForm{
            display: none;
        }
        #addInfor{
            width: 10rem;
            margin-left: 1rem;
            position: relative;
            top: 1rem;
            z-index: 1;
        }
        #TreeDiv{
            display: flex;
            justify-content: space-around;
        }
        #tree{
            width: 50%;
            height: 60vh;
            overflow: auto;
        }
        #nodesDetail{
            width: 40%;
            height: 15rem;
            border: 1px solid #dddddd;
            border-radius: 0.4rem;
            box-shadow:0 1px 6px rgba(176,196,222,1);

        }
        #nodesDetail div{
            height: 7rem;
            font-size: 1.7rem;
            line-height: 7rem;
            text-indent: 3rem;
        }
    </style>
</head>
<body>
<div class="layui-fluid larry-wrapper" id="StandardVUE">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-xs24">
            <section class="panel panel-padding">
                <div class="layui-collapse" lay-filter="test">
                    <form id="form1" class="layui-form layui-form-pane" action="">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">发运订单表头</h2>
                            <div class="layui-colla-content layui-show">
                                <div class="blockout">
                                    <div class="blocks">
                                        <label>SO编号</label>
                                        <div class="layui-input-inline">
                                            <!--<input type="text" class="layui-input" name="wareHouseName" id="wareHouseName" placeholder="仓库名称"/>-->
                                            <input type="text"
                                                   name="SOcode"
                                                   id="SOcode"
                                                   autocomplete="off"
                                                   class="layui-input"/>
                                        </div>
                                    </div>
                                    <div class="blocks">
                                        <label>优先级</label>
                                        <div class="layui-input-inline">
                                            <select lay-filter="priority"
                                                    lay-verify="required"
                                                    id="priority"
                                                    name="priority">
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="blocks">
                                        <label>客户编号</label>
                                        <div class="layui-input-inline">
                                            <select lay-filter="clientCode"
                                                    lay-verify="required"
                                                    lay-search
                                                    id="clientCode"
                                                    name="clientCode"
                                                    placeholder="请选择客户编号">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="blocks">
                                        <label>交货方式</label>
                                        <div class="layui-input-inline">
                                            <select lay-filter="receivingType"
                                                    lay-verify="required"
                                                    id="receivingType"
                                                    name="receivingType">
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div id="suppplierDetail">
                                    <div class="layui-collapse" lay-accordion="">
                                        <div class="layui-colla-item">
                                            <h2 class="layui-colla-title">客户详情</h2>
                                            <div class="layui-colla-content layui-show">
                                                <div class="blockout">
                                                    <div class="blocks">
                                                        <label>客户名称</label>
                                                        <span id="clientName"></span>
                                                    </div>
                                                    <div class="blocks">
                                                        <label>路线名称</label>
                                                        <span id="routeName"></span>
                                                    </div>
                                                    <div class="blocks">
                                                        <label>联系电话</label>
                                                        <span id="phone"></span>
                                                    </div>
                                                    <div class="blocks">
                                                        <label>联系人</label>
                                                        <span id="contact"></span>
                                                    </div>
                                                </div>
                                                <div class="blockout">
                                                    <div class="blocks">
                                                        <label>客户地址</label>
                                                        <span id="clientAddress"></span>
                                                        <input hidden name="province" id="province"/>
                                                        <input hidden name="town" id="town"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="blockout">
                                    <div class="blocks">
                                        <label>计划发货时间</label>
                                        <div class="layui-input-inline">
                                            <input type="text"
                                                   class="layui-input"
                                                   lay-verify="required"
                                                   id="emitTime"
                                                   name="emitTime"
                                                   placeholder="计划发货时间"/>
                                        </div>
                                    </div>
                                    <div class="blocks">
                                        <label>要求交货时间</label>
                                        <div class="layui-input-inline">
                                            <input type="text"
                                                   class="layui-input"
                                                   lay-verify="required"
                                                   id="receivingTime"
                                                   name="receivingTime"
                                                   placeholder="要求交货时间"/>
                                        </div>
                                    </div>
                                    <div class="blocks">
                                        <label>客户订单号</label>
                                        <div class="layui-input-inline">
                                            <input type="text"
                                                   class="layui-input"
                                                   lay-verify="required"
                                                   name="orderCode"
                                                   id="orderCode"
                                                   placeholder="客户订单号"/>
                                        </div>
                                    </div>
                                    <div class="blocks">
                                        <label>订单类型</label>
                                        <div class="layui-input-inline">
                                            <select lay-filter="orderType"
                                                    lay-verify="required"
                                                    lay-search
                                                    id="orderType"
                                                    name="orderType"
                                                    placeholder="订单类型">
                                            </select>
                                        </div>
                                    </div>

                                </div>
                                <div class="blockout">
                                    <div class="blocks" style="width: 10%;">
                                        <label>审核状态</label>
                                        <div class="layui-input-inline">
                                            <span id="auditType"></span>
                                        </div>
                                    </div>
                                    <div class="blocks">
                                        <label>总运费</label>
                                        <div class="layui-input-inline">
                                            <input type="text"
                                                   class="layui-input"
                                                   lay-verify="required"
                                                   name="NumMoney"
                                                   id="NumMoney"
                                                   placeholder="总运费"/>
                                        </div>
                                    </div>
                                    <div class="blocks" style="width: 60%">
                                        <label>备注</label>
                                        <div class="layui-input-inline">
                                            <input type="text" class="layui-input" name="remark" id="remark" placeholder="备注"/>
                                        </div>
                                        <input type="hidden" name="cjsj" id="cjsj"/>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item" style="margin: 2rem 0;">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
        </div>
    </div>
</div>
</body>
<div th:include="public/public_js::public_js"></div>
<script th:src="@{plugin/beyond/assets/js/fuelux/wizard/wizard-custom.js}"></script>

<script>

    var indexs = 0;
    var supplierInf;
    var POtypeData;



    // option渲染方法
    function optionRendering(data, type, value, text1, text2) {
        var optionInf = '';
        if (type === 1) {
            data.forEach(function (item) {
                optionInf += '<option value="'+ item[value] +'">'+ item[text1] +'</option>';
            })
        }
        if (type === 2) {
            data.forEach(function (item) {
                optionInf += '<option value="'+ item[value] +'">'+ item[text1] + ' ' + item[text2] +'</option>';
            })
        }

        return optionInf;
    }

    // 根据包装类型判断主单位是否禁用
    function packageType(type) {
        if (type == 0) {
            $('#unitNumber').attr("disabled",false);
            $('#boxNumber').attr("disabled",true);
        } else {
            $('#unitNumber').attr("disabled",true);
            $('#boxNumber').attr("disabled",false);
        }
    }

    // 查询入库单位
    function wareHouseUnit(id) {
        var DATA;
        $.ajax({
            url: '/zxsswms/wmsPurchaseOrder/packDetailList/' + id,
            type: 'GET',
            dataType: 'json',
            contentType: 'application/json',
            async: false,
            success: function (data) {
                DATA = data;
            }
        })
        return DATA;
    }

    function returnpage() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }

    function toFixeds (data) {
        var str = "";
        if (data) {
            data = data.toString();
            if (data.indexOf('.') < 0) {
                str = data;
            } else {
                str = data.substring(0, data.indexOf('.') + 3);
            }
            return parseFloat(str);
        } else {
            return data;
        }
    }

    layui.use(['myform','zzpUtils','form','laydate','jquery','zzpValidation'],function () {
        var form = layui.form,
            zzpUtils = layui.zzpUtils
            ,laydate = layui.laydate
            ,zzpValidation = layui.zzpValidation
            ,$ = layui.jquery;

        var UnitNum, UnitType, INDEXS = 0, INDEXS = 0;

        // 查询客户信息
        function QueryClientInf(data){
            var clientInf;
            zzpUtils.action({
                url:"/wmsshipmentorder/getCusInfo",
                data: JSON.stringify(data),
                async: false,
                success:function (data) {
                    clientInf = data;
                },error: function (xhr, textStatus) {
                    console.log(textStatus);
                    console.log(xhr)
                }
            });
            return clientInf;
        }

        // 查询订单类型
        function QueryOrderType(data){
            var orderType;
            zzpUtils.action({
                url:"/wmsshipmentorder/getPoLx",
                data: JSON.stringify(data),
                async: false,
                success:function (data) {
                    orderType = data;
                },error: function (xhr, textStatus) {
                    console.log(textStatus);
                    console.log(xhr)
                }
            });
            return orderType;
        }

        $(function () {

            // 查询客户信息
            var ClientInf = QueryClientInf({});
            var ClientOption = '<option></option>';
            ClientOption += optionRendering(ClientInf, 2, 'id', 'khbh', 'khmc');
            $('#clientCode').find("option").remove();
            $('#clientCode').append(ClientOption);

            // 查询订单类型
            var OrderType = QueryOrderType({});
            var OrderOption = '<option></option>';
            OrderOption += optionRendering(OrderType, 1, 'id', 'ddlx');
            $('#orderType').find("option").remove();
            $('#orderType').append(OrderOption);
            form.render('select');

            // 查询交货方式
            zzpUtils.select({
                elem:"#receivingType",
                url:"/sysdictionary/getSysdictionary/wms_quality_testing_jhfs"
            });

            var Data;
            $.ajax({
                url: '/zxsswms/wmsshipmentorder/getOrderAndDetail/' + localStorage['id'],
                type: 'GET',
                dataType: 'json',
                contentType: 'application/json',
                async: false,
                success: function (data) {
                    Data = data.wmsShipmentOrder;
                }
            })

            console.log('DataData', Data);
            $('#SOcode').val(Data.fybh); // ＳＯ编号
            $('#priority').val(Data.yxj);// 优先级
            $('#clientCode').val(Data.khid);// 客户编号
            $('#receivingType').val(Data.jhfs);// 交货方式
            var indexof1 = Data.jhfhsj.indexOf('.');
            var emitTime = Data.jhfhsj;
            if (indexof1 > 0) {
                emitTime = emitTime.substring(0, indexof1)
            }
            $('#emitTime').val(emitTime);// 计划发货时间
            var indexof2 = Data.yqjhsj.indexOf('.');
            var receivingTime = Data.yqjhsj;
            if (indexof2 > 0) {
                receivingTime = receivingTime.substring(0, indexof1)
            }
            $('#receivingTime').val(receivingTime);// 要求交货时间
            $('#orderCode').val(Data.khddh); // 订单号
            $('#orderType').val(Data.fylx);// 订单类型
            var auditType = QueryOrderType({ddlx: Data.show_lx});
            $('#auditType').text(auditType[0].show_zdsh);// 审核状态
            $('#NumMoney').val(Data.zyf); // 总运费
            $('#remark').val(Data.bz);// 备注

            $('#clientName').text(Data.khmc);// 客户名称
            $('#routeName').text(Data.xl);// 路线名称
            $('#phone').text(Data.lxrdh);// 联系电话
            $('#contact').text(Data.lxrxm);// 联系人
            $('#clientAddress').text(Data.khdz);// 客户地址
            $('#cjsj').val(Date.cjsj);
            form.render();

            // 计划发货时间的初始化
            laydate.render({
                elem: '#emitTime'
                ,type: 'datetime'
            });

            // 要求到货时间的时间初始化
            laydate.render({
                elem: '#receivingTime'
                ,type: 'datetime'
            });

        })

        // 选择客户编号时触发
        form.on('select(clientCode)', function (data) {
            if (data.value) {
                //var clientCode = $("#clientCode").find("option:selected").text();
                var clientCode = $("#clientCode").val();
                //var data = QueryClientInf({khbh: clientCode});
                var data = QueryClientInf({});
                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    if (item.id == clientCode) {
                        $('#clientName').text(item.khmc);
                        $('#routeName').text(item.xlmc);
                        $('#phone').text(item.lxrdh);
                        $('#contact').text(item.lxrxm);
                        $('#clientAddress').text(item.khdz);
                        $('#province').val(item.sheng);
                        $('#town').val(item.shi);
                        break;
                    }
                }
//                $('#suppplierDetail').css('display', 'block');
            }
        })

        // 选择订单类型时触发
        form.on('select(orderType)', function (data) {
            if (data.value) {
                var clientCode = $("#orderType").find("option:selected").text();
                console.log('clientSelect', clientCode);
                var data = QueryOrderType({ddlx: clientCode});
                $('#auditType').text(data[0].show_zdsh);
            }
        })

        // 最终保存
        form.on("submit(edit)",function(data){
            var field = data.field;
            console.log('fieldfield', field);
            zzpUtils.confirm("是否确定修改",function(index){
                var SaveData = {};
                SaveData.cjsj = field.cjsj;
                SaveData.fybh = field.SOcode;
                SaveData.fylx = field.orderType;
                SaveData.id = localStorage['id'];
                var appoint1 = field.emitTime;
                appoint1 = new Date(appoint1);
                SaveData.jhfhsj = appoint1.getTime();
                SaveData.jhfs = field.receivingType;
                var clientCode = $("#clientCode").find("option:selected").text();
                SaveData.khbh = clientCode.substring(0, clientCode.indexOf(' '));
                SaveData.khddh = field.orderCode;
                SaveData.khdz = $('#clientAddress').text();
                SaveData.khid = field.clientCode;
                SaveData.khmc = $('#clientName').text()
                SaveData.lxrdh = $('#phone').text();
                SaveData.lxrxm = $('#contact').text();
                SaveData.xlmc = $('#routeName').text();
                var appoint2 = field.receivingTime;
                appoint2 = new Date(appoint2);
                SaveData.yqjhsj = appoint2.getTime();
                SaveData.yxj = field.priority;
                SaveData.zdsh = $('#auditType').text();
                SaveData.zyf = field.NumMoney;
                SaveData.bz = field.remark;

                console.log('SaveDataSaveData', SaveData);
                $.ajax({
                    url: '/zxsswms/wmsshipmentorder/edit',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify(SaveData),
                    success: function (data) {
                        if (data.type === 'success') {
                            setTimeout(function(){
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                                top.layer.msg(data.message);
                            },500);
                        }
                    }
                })
            })
            return false;
        })
    });

</script>
</html>